<template>
  <div id="order-page">
    <c-title text="订单管理"></c-title>
    <van-tabs v-model="activeName" title-active-color="#4978F8" color="#4978F8" @click="change">
      <van-tab title="全部订单" name="all"></van-tab>
      <van-tab title="待接单订单" name="wait_accept"></van-tab>
      <van-tab title="待服务订单" name="wait_work"></van-tab>
      <van-tab title="已完成订单" name="completed"></van-tab>
      <van-tab title="超时退单" name="overtime"></van-tab>
      <van-tab title="已关闭订单" name="close"></van-tab>
    </van-tabs>


    <div class="order-detail" @click="goOrderDetail(item)" v-for="item in list" :key="item.order_id">
      <div class="order-sn">
        <span class="order-sn-color">订单号：{{ item.order_sn }}</span>
        <span class="order-sn-status">{{ item.status_name }}</span>
      </div>
      <div class="order-time" v-if="item.need_type == 1">预约时间:{{ item.start_time_str }}</div>
      <div class="order-time" v-if="item.need_type == 0">服务时间:{{ item.start_time_str }}-{{ item.finish_time_str }}</div>
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <div class="publish-pane">
          <img :src="item.has_one_member && item.has_one_member.avatar_image" />
          <div class="publish-right">
            <div class="publish-name">
              <span>{{ item.order_address && item.order_address.realname }}</span>
              <span class="publish-mobile">({{ item.order_address && item.order_address.mobile }})</span>
            </div>
            <div class="publish-address">{{ item.order_address && item.order_address.address }}</div>
          </div>
        </div>
        <div  @click.stop="goToAdress(item)">
          <div>
            <i style="color: #4978f8;" class="iconfont icon-zx_map_local"></i>
          </div>
          <div style="font-size: 0.8rem; color: #999;">{{ item.distance }}{{ item.unit }}</div>
        </div>
      </div>
      <div class="tec-pane">
        <img :src="item.image_url" />
        <div class="tec-right">
          <div class="tec-name">{{ item.title }}</div>
          <div class="tec-content">{{ item.content }}</div>
          <div class="service-charge">服务费 ￥{{ item.service_fee }}</div>
          <div class="service-charge">技术提成 ￥{{ item.skill_reward_amount }}</div>
        </div>
      </div>
      <div class="text-right" v-if="item.button_models && item.button_models.length !== 0">
        <van-button class="btn" color="#4978F8" size="small" v-for="(c_item, i) in item.button_models" round :key="i"
          @click.stop="order_handle(c_item, item.order_id)">{{ c_item.name }}</van-button>
      </div>
    </div>


    <evaluation-popup :urlStr="urlStr" :evaluation_show.sync="evaluation_show" v-if="evaluation_show" :order_id="order_id"
      @commentEvent="commentEvent"></evaluation-popup>
  </div>
</template>
<script>
import index_controller from "./order.js";

export default index_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#order-page {
  padding-bottom: 5rem;

  .text-right {
    text-align: right;
  }

  .btn {
    margin-top: 0.75rem;
    font-size: 0.8rem;
  }

  .order-type {
    background: white;
    padding: 0.6rem;
    overflow: auto;
    display: flex;

    .type-card {
      border-radius: 0.7rem;
      padding: 0.35rem 0.6rem;
      line-height: 1;
      margin-right: 1rem;
      white-space: nowrap;
      color: #333;
    }

    .active-type-color {
      background: #4978f8;
      color: white !important;
    }
  }

  .order-detail {
    background: white;
    padding: 0.6rem;
    margin-top: 0.4rem;

    .order-sn {
      display: flex;
      justify-content: space-between;

      // 待接单 待审核
      .order-waite-color {
        color: #999 !important;
      }

      .order-service-color {
        color: #f84949 !important;
      }

      .order-sn-status {
        font-size: 0.65rem;
        font-weight: 400;
        color: #333;
      }

      .order-sn-color {
        font-size: 0.65rem;
        font-weight: 400;
        color: #999;
      }
    }

    .enterprise-order {
      margin-bottom: 0.6rem;
    }

    .order-time {
      background: rgba(255, 238, 223, 0.39);
      border-radius: 0.2rem;
      font-size: 0.65rem;
      font-weight: 400;
      color: #ff9c43;
      padding: 0.325rem 0;
      width: 100%;
      margin: 0.6rem 0;
    }

    .publish-pane {
      display: flex;
      margin-bottom: 1rem;

      img {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        margin: 0;
      }

      .publish-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 0.2rem;

        .publish-name {
          font-size: 0.75rem;
          font-weight: bold;
          color: #333;
          text-align: left;

          .publish-mobile {
            font-size: 0.65rem;
            font-weight: 400;
            color: #999;
          }
        }

        .publish-address {
          font-size: 0.65rem;
          font-weight: 400;
          color: #999;
          text-align: left;
        }
      }
    }

    .tec-pane {
      background: rgba(245, 245, 245, 0.39);
      border-radius: 0.2rem;
      padding: 0.6rem;
      display: flex;

      img {
        width: 3.6rem;
        height: 3.6rem;
        background: rgba(232, 232, 232, 0.39);
        border-radius: 0.2rem;
        margin: 0;
      }

      .tec-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: left;
        margin-left: 0.3rem;

        .tec-name {
          font-size: 0.75rem;
          font-weight: 400;
          color: #333;
        }

        .tec-content {
          font-size: 0.7rem;
          font-weight: 400;
          color: #999;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          word-break: break-all;
          overflow: hidden;
        }

        .service-charge {
          font-size: 0.65rem;
          font-weight: 400;
          color: #ff9c43;
        }
      }
    }

    .evaluation-pane {
      width: 100%;
      text-align: right;
      margin-top: 0.6rem;
      margin-bottom: 0.4rem;

      .evaluation-card {
        background: rgb(73, 120, 248);
        border-radius: 0.875rem;
        color: white;
        padding: 0.3rem 1rem;
      }
    }
  }
}
</style>
